<template>
     <div class="cneterBox">
          <div class="content">
               <!-- 图层1 - 态势分析 -->
               <div class="layersContainer layers1Container" :data-layer="1">
                    <Layers1 />
               </div>

               <!-- 图层2 -->
               <div class="layersContainer layers2Container" :data-layer="2">
                    <Layers2 />
               </div>

               <!-- 图层3 -->
               <div class="layersContainer layers3Container" :data-layer="3">
                    <Layers3 />
               </div>

               <!-- 图层4 - 空间底座 -->
               <div class="layersContainer layers4Container" :data-layer="4">
                    <Layers4 />
               </div>
          </div>
     </div>
</template>

<script setup lang="ts">
// 导入子组件
import Layers1 from './components/layers1.vue'
import Layers2 from './components/layers2.vue'
import Layers3 from './components/layers3.vue'
import Layers4 from './components/layers4.vue'
</script>

<style scoped lang="scss">
// CSS 变量定义，便于统一管理和维护
$animation-duration: 1s;
$animation-delay: 0.2s;
$base-padding: 15px;

.cneterBox {
     width: 100%;
     height: 100%;
     padding: $base-padding;

     .content {
          width: 100%;
          height: 100%;
          position: relative;

          // 共享的图层容器样式
          .layersContainer {
               position: absolute;
               // 添加淡入和缩放动画
               animation: fadeInScale $animation-duration ease-out forwards;
               opacity: 0;
               transform: scale(0.9);
          }

          // 图层1 - 最上层
          .layers1Container {
               width: 34%;
               height: 30%;
               left: 33%;
               bottom: 64%;
               z-index: 4;
               // 延迟动画，创建层次感
               animation-delay: $animation-delay * 4;
          }

          // 图层2
          .layers2Container {
               width: 44%;
               height: 25%;
               left: 28%;
               bottom: 53%;
               z-index: 3;
               animation-delay: $animation-delay * 3;
          }

          // 图层3
          .layers3Container {
               width: 66%;
               height: 30%;
               left: 17%;
               bottom: 39%;
               z-index: 2;
               animation-delay: $animation-delay * 2;
          }

          // 图层4 - 最底层
          .layers4Container {
               width: 90%;
               height: 40%;
               left: 5%;
               bottom: 5%;
               z-index: 1;
               animation-delay: $animation-delay * 1;
          }
     }
}

// 动画定义
@keyframes fadeInScale {
     0% {
          opacity: 0;
          transform: scale(0.9);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}

// 为图层添加悬停效果，增强交互体验
.layersContainer:hover {
     transform: scale(1.02);
     transition: transform 0.3s ease;
     cursor: pointer;
}
</style>
